<template>
   <el-table
    :data="arr"
    style="width: 100%">
    <el-table-column
      type="index"
       label="序号"
       width="50"
      :index="indexMethod">
    </el-table-column>

      <el-table-column
      prop="card"
      label="卡号"
      width="85">
      <!-- <template slot-scope="scope"><i style='margin-right:5px;'></i></template> -->
    </el-table-column>

    <el-table-column
      prop="viptype"
      label="会员类型"
      width="70">
    </el-table-column>

      <el-table-column
      label='会员等级'
      width="70">
    
      <template slot-scope="scope"><span style="color:#FFD76D">VIP1{{ scope.row.income }}</span></template>
    </el-table-column>

     <el-table-column
      prop="name"
      label="会员姓名"
      width="70">
    </el-table-column>

    <el-table-column
      prop="number"
      label="手机号码"
      width="95">
    </el-table-column>

    <el-table-column
    class="consumption1"
      prop="consumption"
      label="累积消费(元)"
      width="70">
    </el-table-column>

     <el-table-column
      prop="balance"
      label="储存余额(元)"
      width="70">
    </el-table-column>

    <el-table-column
      prop="accrual"
      label="累积储值(元)"
      width="70">
    </el-table-column>

     <el-table-column
      prop="integral"
      label="积分"
      width="50">
    </el-table-column>

    <el-table-column
      prop="opening"
      label="开卡时间"
      width="135">
    </el-table-column>

    <el-table-column
      prop="expiration"
      label="到期时间"
      width="135">
    </el-table-column>


    <el-table-column label="会员状态">
      <template slot-scope="scope">
         <el-switch
         v-model="scope.row.x"
        active-color="#13ce66"
        inactive-color="#ff4949"
        >
</el-switch>
   
      </template>
    </el-table-column>


   <el-table-column >
        
      <template slot-scope="scope"><button style="color:#CDCFF7" @click="operate">添加{{ scope.row.income }}</button></template>
    </el-table-column>

   <el-table-column >
      <template slot-scope="scope">
        <el-button
        class="x"
          size="mini"
          @click="handleEdit(scope.row)">操作</el-button> 
      </template>
   </el-table-column>


  </el-table>
</template>

<script>
export default {
  props:['arr'],
  data() {
      return {
        value:true,
        tableData: [{
          //   card: '028100159',
          //   viptype: '普通会员',
          //   rank:'VIP1',
         
          // name: '王小虎',
          // number:'17754138769',
          // consumption:'1200.90',
          // balance:'1200.90',
          // accrual:'1200.90',
          // integral:'1000',
          // opening:'2019-11-12 12:08:12',
          // expiration:'2019-11-12 12:08:12',
          // operate:'操作' 
        }, 
        ],
      }
    },
    methods: {
      handleEdit(row){
        this.$emit('editlog',row)
        // console.log(row);
      },
      indexMethod(index) {
        return index;
      },
      operate(){
         this.$emit('operatetion')
      },
      

    },
    
}
</script>

<style lang="less" scoped>
/deep/.has-gutter{
  color:#060606;
  th,tr{background-color: #C2C5F6 !important;}
}
/deep/.x{
  background-color: #E6E7FB;
}

</style>